<template>
  <div>
    <div class="box2" style="margin: 0px 48px; margin-top: 24px">
      <div class="box2Left">
        <div>
          <span class="titStyle">训练水平综合评定业务模型</span>
        </div>
        <div class="ywmoxing">
          <div ref="leida"></div>
          <div class="qipao">
            <div>
              <div class="zhanbiText">
                强项<span>(高于该指标平均值5分以上)</span>
              </div>
              <div class="bingBox" ref="qiang"></div>
            </div>
            <div>
              <div class="zhanbiText">
                弱项<span>(低于该指标平均值5分以上)</span>
              </div>
              <div class="bingBox" ref="ruo"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2" style="margin: 24px 48px 48px 48px">
      <div class="box2right" style="margin-left: 0px">
        <div>
          <span class="titStyle">各个一级指标变化趋势</span>
        </div>
        <div ref="zbqushinox" class="qushibianhua"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 评定详情分析
export default {
  data() {
    return {};
  },
  props: {},
  components: {},
  mounted() {},
  watch: {},
  methods: {
    // 雷达图
    leida() {
      let myChart = this.$echarts.init(this.$refs.leida);
      myChart.setOption({
        legend: {
          left: 10,
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
        },
        grid: {
          left: "5%",
          right: "4%",
          bottom: "4%",
          top: "5%",
          containLabel: true,
        },
        color: ["#F69D82", "#59BA89", "#277074"],
        radar: {
          triggerEvent: true,
          // shape: 'circle',
          // axisLabel: { show: true },  刻度线上得值是否展示
          radius: 80,
          nameGap: 4,
          indicator: [
            { name: "训练计划制定", max: 6500 },
            { name: "训练监察奖惩", max: 16000 },
            { name: "人员素质", max: 30000 },
            { name: "训练条件建设", max: 38000 },
            { name: "训练考核", max: 52000 },
            { name: "训练计划落实", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "本次评定",
                areaStyle: {},
                symbol: "none",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "上次评定",
                areaStyle: {},
                symbol: "none",
              },
              {
                value: [1000, 12000, 8000, 6000, 2000, 1000],
                name: "同类型部队均值",
                areaStyle: {},
                symbol: "none",
              },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
      myChart.on("click", function (params) {
        if (params.componentType === "radar") {
          // 点击到了 radar坐标轴标签 上
          console.log("点击的名称", params.name);
        } else if (params.componentType === "series") {
          //   console.log("不确定的位置")
        }
      });
    },
    // 各个一级指标变化趋势
    zbqushi() {
      let myChart = this.$echarts.init(this.$refs.zbqushinox);
      myChart.setOption({
        color: [
          "#277074",
          "#59BA89",
          "#A1C94A",
          "#E1F396",
          "#6780DC",
          "#4795F2",
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true,
        },
        legend: {
          icon: "rect",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          left: 10,
          textStyle: {
            fontSize: 12,
            color: "#708189",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            animation: false,
          },
        },
        xAxis: [
          {
            boundaryGap: false,
            data: [
              "12-12",
              "12-13",
              "12-14",
              "12-15",
              "12-16",
              "12-17",
              "12-18",
            ],
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#708189",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F4F6F8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              //网格线
              show: true,
              lineStyle: {
                color: "#f5f5f5", //网格线的颜色
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "训练计划制定",
            type: "line",
            smooth: true,
            symbol: "circle", //实心得折点
            symbolSize: 6, //拐点圆的大小
            data: [420, 332, 301, 334, 350, 370, 370],
          },
          {
            name: "训练计划落实",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [220, 282, 191, 34, 290, 30, 310],
          },
          {
            name: "训练考核",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [20, 182, 191, 34, 290, 330, 10],
          },
          {
            name: "训练条件建设",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [220, 12, 191, 24, 290, 330, 30],
          },
          {
            name: "人员素质",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [20, 182, 191, 24, 290, 330, 410],
          },
          {
            name: "训练监察奖惩",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 6, //拐点圆的大小
            data: [320, 12, 191, 234, 20, 330, 310],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    qiangxiang() {
      let myChart = this.$echarts.init(this.$refs.qiang);
      myChart.setOption({
        color: ["#A0E8FF", "#A0E8FF", "#A0E8FF"],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 90],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 10,
            },
            data: [
              { value: 88.2, name: "训练计划落实:88.2\n 平均分：80分" },
              { value: 70.2, name: "训练计划制定:70.2\n 平均分：81分" },
              { value: 72, name: "人员素质:72\n 平均分：82分" },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
    ruoxiang() {
      let myChart = this.$echarts.init(this.$refs.ruo);
      myChart.setOption({
        color: ["#FFD600", "#FFD600", "#FFD600"],
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 90],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 10,
            },
            data: [
              { value: 88.2, name: "训练考核:88.2\n 平均分：80分" },
              { value: 70.2, name: "训练监察奖惩:70.2\n 平均分：81分" },
            ],
          },
        ],
      });
      window.onresize = myChart.resize;
    },
  },
};
</script>

<style  scoped>
@import "./css/index.css";
</style>


